<template>
	<view class="content">
   <!-- #ifdef MP-WEIXIN -->
   <top-nav></top-nav>
   <!-- #endif -->
    <common-header class="header" ></common-header>
    <!--  -->
    <view class="home-tabs">
      <u-tabs :list="list1" @click="clickTag" :current="current" id="tabs"></u-tabs>
    </view>
    <!-- #ifdef H5 || APP -->
    <swiper :duration="1000" :current="current" class="swiper" @change="updateSwiper" :style="{height: contextHeight}">
      <swiper-item v-for="(item,index) in list1" :key="index">
        <scroll-view scroll-y="true" :style="{height: contextHeight}" @scrolltolower="tolowerRefresh">
          <view class="swiper-item">
            <component :is="currentComponent" v-if="current == index" :mostHeatCourseList="mostHeatCourseList"></component>
          </view>
        </scroll-view>
       
      </swiper-item>
    </swiper>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <swiper :duration="1000" :current="current" class="swiper" @change="updateSwiper" :style="{height: contextHeight}">
      <swiper-item  v-for="(item,index) in list1" :key="index">
        <scroll-view scroll-y="true" :style="{height: contextHeight}" @scrolltolower="tolowerRefresh"> 
          <view class="swiper-item">
            <Recommend v-if="current == 0 && current == index" :mostHeatCourseList="mostHeatCourseList"></Recommend>
            <Free v-else-if="current == 1 && current == index"></Free>
            <Practical v-else-if="current == 2 && current == index"></Practical>
          </view>
        </scroll-view>

      </swiper-item>
    </swiper>
    <!-- #endif -->
    
	</view>
</template>

<script>
  import Header from '@/components/header/header.vue'
  import topNav from '@/components/top-nav/top-nav.vue'
  import Free from '@/components/free/free.vue'
  import Practical from '@/components/practical/practical.vue'
  import Recommend from '@/components/recommend/recommend.vue'
  import {mostHeatCourse} from '@/api/course.js'
  import {mixin} from '@/mixins/mixin.js'
	export default {
    components:{
      commonHeader:Header,
      topNav,
      Recommend,
      Free,
      Practical
    },
    mixins:[mixin],
		data() {
			return {
				list1: [{
            name: '今日推荐',
        }, {
            name: '免费课程',
        }, {
            name: '实战课程'
        }],
        current:0,
        currentComponent:Recommend,
        contextHeight: 0,
        mostHeatCourseList:[],
        mostHeatParams:{
          pageNum:1,
          pageSize:4
        },
        mostHeatCourseHasNextPage:true,
        mostHeatCourseRequest:true
			}
		},
		onReady() {
      // 获取大家都在看的数据
      this.getMostHeatCourse(this.mostHeatParams)
      // 计算内容滑动的高度
      this.getScrollViewHeight('.header','.home-tabs').then(res=>{
        this.contextHeight = res
      })
		},
    
		methods: {
      // 获取大家都在看课程
      async getMostHeatCourse(value) {
          // 判断是否有下一页，不能无限次请求
          if(!this.mostHeatCourseHasNextPage) return uni.showToast({
            title:'加载完毕'
          })
          const {data} = await mostHeatCourse(value)
          this.mostHeatCourseHasNextPage = data.pageInfo.hasNextPage
          this.mostHeatCourseRequest = false
          this.mostHeatCourseList = [...this.mostHeatCourseList,...data.pageInfo.list]
        
      },
      /* 点击tab切换下面轮播的current*/
      clickTag({index}) {
        // 获取tags的index索引
          this.current = index
          this.updateComponent(index)
      },
      /* 滑动轮播修改上面tabs的current*/
      updateSwiper(e) {
        console.log(e.detail.current);
        this.current = e.detail.current
        this.updateComponent(e.detail.current)
      },
      /* 动态修改组件*/
      updateComponent(index) {
        switch (index){
          case 0: this.currentComponent = Recommend
            break;
          case 1: this.currentComponent = Free
            break;
          case 2: this.currentComponent = Practical
            break;
          default:
            break;
        }
      },

      /* 滑动触底刷新*/
      tolowerRefresh() {
        console.log('触底刷新');
        // 一旦触底刷新需要加载--新的大家都在看
        this.mostHeatParams.pageNum++
        this.getMostHeatCourse(this.mostHeatParams)
        
      }
    }
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
    padding: 0 28rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
  .header {
    width: 100%;
  }
  .swiper {
    width: 100%;
  }
</style>
